<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>局部过滤器：vue对象的filters属性可以中可以定义很多方法。</li>
        <li>全局过滤器：使用Vue.filter("过滤器名称",方法)注册。</li>
        <li>如果局部过滤器和全局过滤器名称一样，那么局部会覆盖全局。</li>
    </ul>
    <main id="app">
        <p>{{num}}</p>
        <p>五倍数据：{{num * 5}}</p>
        <p>五倍数据（过滤器）：{{num | five}}</p>
        <p>加五：{{num | addFive}}</p>
        <p>连用过滤器，加五再乘五：{{num | addFive | five}}</p>
        <p v-bind:id="num | addFive | five">vue2.1之后过滤器可以搭配v-bind使用</p>
        <!-- num作为fiveAdd的第一个参数，2作为fiveAdd的第二个参数 -->
        <p>乘五减2：{{num | fiveAdd(2) }}</p>
    </main>
</body>
<script src="../vue.min.js"></script>
<script>
    Vue.filter("addFive",value => value + 5);


    new Vue({
        el: "#app",
        data() {
            return {
                num: 20,  
            }
        },
        // 局部过滤器（在某个vue对象上申明）
        filters: {
            // 过滤器函数：返回传入参数乘以5
            five(value) {
                return value * 5;
            },
            // 过滤器函数：返回传入参数乘以5减去第二个参数
            fiveAdd(value,value2) {
                return value * 5 - value2;
            }
        }
    })
</script>
</html>